<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入样式 -->
        <link rel="stylesheet" href="/unpkg/lib-master/theme-chalk/index.css"> 
  <style>
    *{
      margin: 0px;
      padding: 0px;
    }
    .screening{
      width: 98%;
      height: 160px;
      margin: 20px auto;
      border: 1px solid rgb(220,223,230);
      background: #fff;
    }
    .screeningTop{
      width: 100%;
      height: 36px;
      background: rgb(244,246,249);
      border-bottom: 1px solid rgb(220,223,230);
    }
    .screeningTop span{
      line-height: 36px;
      display: block;
      margin-left: 20px;
      font-size: 14px;
      font-weight: 600;
    }
    .screeningBottom{
      width: 100%;
      height: 124px;
    }
    .screeningBottom p{
      display: block;
      font-size: 14px;
      line-height: 60px;
      margin-left: 20px;
    }
    .screeningBottom p input{
      width: 360px;
      height: 24px;
      border: 1px solid  rgb(220,223,230);
      outline: none;
      padding: 0px 6px;
    }
    .screeningBottom p button{
      width: 70px;
      height: 24px;
      background: #1E9FFF;
      border-radius: 3px;
      border: 0px solid  rgb(220,223,230);
      color: white;
    }
    #but{
      width: 100px;
      height: 36px;
      background: #1E9FFF;
      color: #fff;
      border: #1E9FFF;
      margin-left: 20px;
    }
    #but:hover{
      background: #1E9FFF;
      color: white;
    }
    .el-tabs{
      width: 98%;
      margin: 0px auto;
    }
    .cardBox{
      height: 600px;
      overflow: auto;
    }
    .el-table .warning-row {
    background: oldlace;
    }
    .el-table .success-row {
      background: #f0f9eb;
    }
    .cell{
     text-align: center;
    }
    #Delete{
      background: rgb(50,150,250);
      border: 0px solid white;
    }
    /* 弹框 */
    #elInput{
    width: 300px;
    }
    #popUp{
      width: 61%;
      margin: 0px auto;
    }
    #kaoLeft{
      margin-left: -45px;
    }
    .newColor{
      background: red;
    }
  </style>
</head>
<body>
  <div class="add">
    <!-- 筛选 -->
    <div class="screening">
      <div class="screeningTop"><span>筛选</span></div>
      <div class="screeningBottom">
        <!-- <input type="text" name="text1" value="<%=request.form("text1")%"> -->
        <p>兑换码&nbsp;&nbsp;&nbsp;<input type="text" v-model=nameValue required="required">&nbsp;&nbsp;&nbsp;&nbsp;<button @click="search()">搜索</button></p>
        <el-button type="success" @click="dialogFormVisible = true"  id="but">我要添加</el-button>

        <el-dialog title="兑换码" :visible.sync="dialogFormVisible" id="popUp">
          <p >兑换码添加: <b style="font-size: 12ox; color: teal;">多个兑换码，请以英文逗号分开，程序会自动过滤掉重复的兑换码</b></p>
          <el-form :model="form">
            <el-form-item label="兑换码" :label-width="formLabelWidth" id="kaoLeft">
              <el-input v-model="form.name" autocomplete="off" id="elInput"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogForm(form)">添 加</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
    <!-- 数据 -->
    <el-tabs type="border-card">
      <el-tab-pane label="全部">
        <div class="cardBox">
          <el-table
            :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
            style="width: 100%">
            <el-table-column label="兑换码" width="180">
              <template slot-scope="scope">
                <!-- 兑换码 -->
                !{!{scope.row.dcode}}
              </template>
            </el-table-column>
            <el-table-column label="是否领取" width="480">
              <template slot-scope="scope">
                <el-button size="mini"  type="danger" @click="handleDelete()" id="Delete" disabled="disabled">
                  <!-- 是否领取 -->
                  !{!{scope.row.status}}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column label="客户昵称" width="180">
              <template slot-scope="scope">
                <!-- 兑换码 -->
                !{!{scope.row.username}}
              </template>
            </el-table-column>
            <el-table-column prop="" width="680"></el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index,scope.row)"
                >
                删除
              </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分頁 -->
          <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 40]" 
          :page-size="pagesize"         
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"> 
         </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="未领取">
        <div class="cardBox">
          <el-table
            :data="DidNotReceive.slice((currentPage-1)*pagesize,currentPage*pagesize)"
            style="width: 100%">
            <el-table-column label="兑换码" width="180">
              <template slot-scope="scope">
                <!-- 兑换码 -->
                !{!{scope.row.dcode}}
              </template>
            </el-table-column>
            <el-table-column label="是否领取" width="480">
              <template slot-scope="scope">
                <el-button size="mini"  type="danger" @click="handleDelete()" id="Delete" disabled="disabled">
                  <!-- 是否领取 -->
                  !{!{scope.row.status}}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column prop="" width="680"></el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index,scope.row)"
                >
                删除
              </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 40]" 
          :page-size="pagesize"         
          layout="total, sizes, prev, pager, next, jumper"
          :total="DidNotReceive.length"> 
         </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="已领取">
        <div class="cardBox">
            <el-table
            :data="HaveToReceive.slice((currentPage-1)*pagesize,currentPage*pagesize)"
            style="width: 100%">
            <el-table-column label="兑换码" width="180">
              <template slot-scope="scope">
                <!-- 兑换码 -->
               !{!{scope.row.dcode}}
              </template>
            </el-table-column>
            <el-table-column label="是否领取" width="480">
              <template slot-scope="scope">
                <el-button size="mini"  type="danger" @click="handleDelete()" id="Delete" disabled="disabled">
                  <!-- 是否领取 -->
                  !{!{scope.row.status}}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column label="客户昵称" width="180">
              <template slot-scope="scope">
                <!-- 兑换码 -->
                !{!{scope.row.username}}
              </template>
            </el-table-column>
            <el-table-column prop="" width="680"></el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index,scope.row)"
                >
                删除
              </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 40]" 
          :page-size="pagesize"         
          layout="total, sizes, prev, pager, next, jumper"
          :total="HaveToReceive.length"> 
         </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</body>
</html>
<!-- 引入Vue , ElementUi库 -->
<script src="/unpkg/unpkg.vue.js"></script>
<script src="/unpkg/lib-master/index.js"></script>
<script src="/unpkg/unpkg.axios.min.js"></script>
{$h->import('static/layui/layui.js')}
{$h->import('static/js/ajax.js')}
<script>
  const add = new Vue({
    el:'.add',
    data:{
      tableData: {$etList},
      dialogFormVisible: false,
      // 弹出框 的input
      form: {
        name: ''
      },
      formLabelWidth: '120px',
      // 未领取
      DidNotReceive:[],
      // 已领取
      HaveToReceive:[],
      currentPage:1, //初始页
      pagesize:10,    //    每页的数据
      slatrue:true,
      // 搜索
      nameValue:""
    },
    created() {
      this.setData();
    },
    methods: {
      // 搜索
      search(){
        window.location.href="convert_deltal.html?d_id={$d_ids}&name="+this.nameValue;
      },
      // 我要添加 点击添加时
      dialogForm(row){
        var code_name=this.form.name;
        myAjaxPost(false, true, 'convert_deltal_add.html', { d_id:"{$d_ids}",dcodes:code_name}, function (resp) {
        if (resp.status == 'success') {
          tusi(resp.msg);
          window.location.reload();
        }else{
          alert(resp.msg);
          if(resp.data == 1){
            $('#file_path').val('');
            $('#file_name').val('');
            $('#file_name_show').html('');
          }
        }
        });
        this.dialogFormVisible=false;
        this.form.name='';
      },
      // 删除
      handleDelete(index,row){
        console.log(index,row)
        myAjaxPost(false, true, 'convert_deltal_del.html', { id: row.id}, function (resp) {
          console.log(resp)
            if (resp.status == 'success') {
            tusi(resp.msg);
              window.location.reload()
            }else{
              alert(resp.msg);
            }
        });
      },
      // 是否领取
      setData(){
        this.tableData.map((item,index)=>{
          if (item.status == 0) {
            item.status="未领取"
          this.DidNotReceive.push(this.tableData[index]);
        } else if (item.status == 1) {
          item.status="已领取"
          this.HaveToReceive.push(this.tableData[index]);
        }else{
          return;
        }
        })
      },
        // 初始页currentPage、初始每页数据数pagesize和数据data
      handleSizeChange: function (size) {
        this.pagesize = size;
        console.log(this.pagesize)  //每页下拉显示数据
      },
      handleCurrentChange: function(currentPage){
        this.currentPage = currentPage;
        console.log(this.currentPage)  //点击第几页
      },
    },
  })
</script>